/* Dit is de stylesheet van de responsive sub-webpage, behorend bij Colours & Style by Carla */

/* Make it responsive' */

/* EM:   Relative to the font-size of the element (2em means 2 times the size of the current font) */


@media only screen and (max-width: 600px) {
  body {
    background-color: green;
  }
}


/* 
  Best Practice
  It is best practice to use relative file paths (if possible).
  When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer 
  (localhost) as well as on your current public domain and your future public domains. 
*/

/* This sets the margin property to auto to horizontally center the element within its container. 
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins. */
div {
  margin: auto;
}


/* Make the grid container voor de sub-webpage in de bijbehorende kleur  */
#myDIV {
  height: 500px;
  /* dit getal bepaalt de hoogte van de container */
  display: grid;
  gap: 1px;
  background-color: green
  padding 5px;
  grid-template-columns: 250px 1000px 50px;
  grid-template-rows: auto auto;
}

#myDIV div {
  background-color: green transparent;
  text-align: center;
  padding: 5px 0;
  font-size: 30px;
}

/* end of making grid-container */

/* Style de body voor de sub-webpage in de bijbehorende kleur */
body {
  background-color: green;
  /* Standaard lettertype voor de website */
  font-family: 'Open Sans ';
  font-size: 18x;
}

/* Styling the images */
img.a {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  left: 5px;
  top: 10px;
}

/* Styling the text voor de sub-webpage in de bijbehorende kleur */
h1 {
  color: lightgreen;
  text-align: center;
}

h2 {
  color: lightgreen;
}

h3 {
  color: lightgreen;
}



/* Outline-left */
p.out-left {
  color: lightgreen;
  text-align: left;
}

/* Outline right */
p.out-right {
  color: lightgreen;
  text-align: right;
}

/* Outline center */
p.out-center {
  color: lightgreen;
  text-align: center;
}

/* Aparte opmaak voor text */
p.aparte_opmaak {
  color: orangered;
  text-align: left;
  font-size: 30px;
}

/* Prijs-contact-info */
p.prijs {
  color: whitesmoke;
  text-align: left;
    position: absolute;
      top: 25%;
      Left: 2%;
}
p.contact {
  color: whitesmoke;
  text-align: left;
  position: absolute;
  top: 35%;
  Left: 2%;
}



/* Settings voor Social Media Sidebar */
.social-sidebar {
  position: absolute;
  top: 18%;
  right: 2%;
  /* Bijna aan de rand rechts, maar toch een beetje ingesprongen */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  z-index: 1000;
}

.social-button {
  position: relative;
  background-color: lightseagreen;
  border: none;
  cursor: pointer;
  padding: 5px;
  /* afstand van de buttons tot elkaar */
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
  /* geen box shadow in dit design */

  /* Dit laat de sidebar op en neer bewegen, als je wilt */
  /*
    transition: transform 0.2s;
    animation: float 2.5s ease-in-out infinite;
    */
}

.social-button:hover {
  transform: scale(1.1);
}

.social-button img {
  width: 24px;
  height: 24px;
}

.social-button::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 110%;
  top: 50%;
  transform: translateY(-50%);
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-size: 14px;
}

.social-button:hover::after {
  opacity: 1;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .social-sidebar {
    flex-direction: row;
    top: auto;
    bottom: 10px;
    right: 50%;
    transform: translateX(50%);
  }

  .social-button::after {
    right: 50%;
    top: -40px;
    transform: translateX(50%);
  }
}

/* End Settings Social Media Sidebar*/

/* The Horizontal Ruler Line voor de sub-webpage in de bijbehorende kleur*/
hr.topline {
  border-top: 10px
    /* dikte van de lijn */
    solid lightgreen;
}